<template>
  <div>
    <!-- 列表 -->
    <el-table
      :data="list"
      border
      size="mini"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{
        'text-align': 'center',
        'font-size': '18px',
        color: 'green',
        background: '#f1f1f1',
        border: '1px solid #999',
      }"
      :span-method="arraySpanMethod"
      style="margin-top: 20px"
    >
      <el-table-column label="名称">
        <el-table-column label="名称1" prop="name"></el-table-column>
        <el-table-column label="名称2" prop="name1"></el-table-column>
      </el-table-column>
      <el-table-column label="数量" prop="num"></el-table-column>
      <el-table-column label="编号" prop="code"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "名称1", num: 1, code: "1", name1: "名称1.1" },
        { name: "名称2", num: 2, code: "002", name1: "名称2.1" },
        { name: "名称2", num: 4, code: "002" },
        { name: "名称2", num: 6, code: "002" },
        { name: "名称3", num: 3, code: "003" },
      ],
    };
  },
  created() {},
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并行  名字相同合并
      if (columnIndex === 0) {
        if (rowIndex === 0 || row.name != this.list[rowIndex - 1].name) {
          let rowspan = 0;
          this.list.forEach((element) => {
            if (element.name === row.name) {
              rowspan++;
            }
          });
          return [rowspan, 1];
        } else {
          return [0, 0];
        }
      }
      //   const fields = ["name"]; //需要合并的字段
      //   const cellValue = row[column.property]; //获取当前行字段
      //   //合并上下行，获取上一行和下一行的数据和当前行对比，如果一致，合并上下行
      //   if (cellValue && fields.includes(column.property) && columnIndex == 0) {
      //     const prevRow = this.list[rowIndex - 1]; //上一行的数据
      //     let nextRow = this.list[rowIndex + 1]; //下一行数据
      //     // 上一行  下一行数据与当前相等，合并
      //     if (prevRow && prevRow[column.property] === cellValue) {
      //       return { rowspan: 0, colspan: 0 };
      //     } else {
      //       let countRowspan = 1;
      //       while (nextRow && nextRow[column.property] === cellValue) {
      //         nextRow = this.list[++countRowspan + rowIndex];
      //       }
      //       if (countRowspan > 1) {
      //         return { rowspan: countRowspan, colspan: 1 };
      //       }
      //     }
      //   }
      //合并列 名称值都为1 的合并
      // if (columnIndex >= 1) {
      //   let colspan = 0;
      //   let colkeys = Object.keys(row);//当前行字段
      //   let currentindex = columnIndex - 1;//列索引
      //   if (row[colkeys[currentindex]] == 1) {
      //     if (row[colkeys[currentindex - 1]] != row[colkeys[currentindex]]) {
      //       for (let i = currentindex; i < colkeys.length; i++) {
      //         if (row[colkeys[i]] == 1) {
      //           colspan++;
      //         } else {
      //           break;
      //         }
      //       }
      //       return [1, colspan];
      //     } else {
      //       return [0, 0];
      //     }
      //   }
      // }
      //   if(columnIndex == 1){
      //       if (row.code == row.num) {
      //         return [1, 2];
      //       } else {
      //         return [0, 1];
      //       }
      //   }
    },
  },
};
</script>

<style scoped>

</style>